<template>
	<div id="app">
		<div class="t_head">
		        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>首页</p>&nbsp;|&nbsp;<p>HTML</p>&nbsp;|&nbsp;<p>CSS</p>&nbsp;|&nbsp;<p>VUE</p>&nbsp;|&nbsp;<p>JAVA</p>&nbsp;|&nbsp;<p>PYTHON3</p>&nbsp;|&nbsp;  <p>NODEJS</p>
		    </div>
		    <div class="t_body">
		        <div class="body_div1">
		          <br><br>
		          <ul >
		          <li  v-for="l1 in al1" style="list-style-type:none;">{{l1}}</li>
		        <!--  <li style="list-style-type:none;">HTML简介</li><br>
		          <li style="list-style-type:none;">HTML编辑器</li> -->
		          </ul>
		        </div>
		        <div class="body_div2">
		          <br>
		          <h1>27刘钊汝</h1><br>
		          <h1> </h1>
		          <iframe src ="https://my.oschina.net/lenglingx/blog/5522896" width="98%" height="300" class="if11" scrolling="yes">
		              <p>浏览器不支持iframe</p>
		          </iframe>
		        </div>
		        <div class="body_div3">
		          <br>
		          <ul>
		          <li  v-for="l2s in l2" style="list-style-type:none;">{{l2s}}</li>
	
		          </ul>
		        </div>
		    </div>
		    <div class="t_end">
		
		    </div>
	</div>
</template>

<script>
export default {
  name: 'HelloWorld',
   data () {
  	        return {
  	          l2: ["服务器",'数据库','数据分析'],
  			  al1:["菜单",'Python3简介','Python3环境搭建','Python3VScode','Python3基础语法','Python3基本数据类型','Python3数据类型转换','Python3推导式','Python3解释器','Python3注释','Python3运算符','Python3数字(Number)','Python3字符串','Python3列表','Python3元组','Python3字典','Python3集合','Python3编程第一步','Python3条件控制','Python3循环语句'],
  	        }
  	      },
}
</script>

<style>
	      *{
	        margin:1px;
	      }
	      .t_head{
	        height: 10vh;
	        background-color: linen;
	        line-height: 10vh;
	
	      }
	      .t_body{
	        margin:auto;
	        display: flex;
	        width: 90%;
	      }
	      .body_div1{
	        background-color: #f6f5ec;
	        width: 15%;
	        /* height:90vh; */
	      }
	      .body_div2{
	        background-color: #d9d6c3;
	        width: 75%;
	        /* height:90vh; */
	      }
	      .body_div3{
	        background-color: #f2eada;
	        width: 10%;
	        /* height:90vh; */
	      }
	      .if11{
	        margin:5px;
	      }
		  ul{
			  margin: 0;
			  padding: 0;
		  }
		  li{
			  margin-bottom: 20px;
		  }
	      p{display: inline;}
</style>